@extends('layouts.back_stage')
@section('content') 
  <style>
  #app{padding:20px}
  .table_margin{padding:40px 10px 40px 40px;background:#fff;margin:10px 40px 0 0px}
  .ingred_sel{width:180px;margin-left:10px}
  .but_client{text-align:right ;margin-top:10px;background:#fff;padding-right:20px} 
  .Transfer{margin-top:20px;}
  .transfer-footer {
    margin-left: 20px;
    padding: 6px 5px;
  }
  
  </style>
  <div class="container">
      <div class="page-body" id="app">
         <div class="table_margin">
            <div class="client_name">
            <label>部门名 &nbsp; &nbsp;&nbsp;</label>
              <el-input  class="ingred_sel" size="small" @blur="handleSelect" placeholder="请输入"></el-input>
              <!-- <el-autocomplete
                  class="inline-input"
                  v-model="state1"
                  size="small"
                  :fetch-suggestions="querySearch"
                  placeholder="请输入内容"
                  @blur="handleSelect"
                ></el-autocomplete> -->
            </div>
            <div class="but_client">
                <el-button  class="touching" @click="home" size="small" >取消</el-button>
                <el-button type="primary" class="touching" @click=clientCommit size="small" >保存</el-button>   
            </div>
            <div class="Transfer" >
                <template>
                    <el-transfer 
                    v-model="value1" 
                     filterable
                     :titles="['所有成员','新部门成员']"
                     @change="shiftClient"
                      :data="data"></el-transfer>
                 </template>
            </div>
          
         </div>
      </div>
  </div>
 <script>
   new Vue({
        el: '#app',
        data() {
          // const generateData = _ => {
          //   const data = [];
          //   for (let i = 1; i <= 8; i++) {
          //     data.push({
          //       key: i,
          //       label: `备选项 ${ i }`,
          //     // disabled: i % 4 === 0
          //     });
          //    }
          //    return data;
          //   };                  
         return {  
              state1: '',//所以部门查询
              data: [],
              value1: [],//这个是新增部门里面的值
              shiftId:[],//用来装移动了成员的id  
              name_client:'',//装新增部门名  
            };
          },
       methods: {
         //用来装移动了成员的id 
        shiftClient(id){
          let that=this
             // console.log(id)
              that.shiftId=id
        },
         //提交 保存 按钮
         clientCommit(){
          let that=this
                this.$confirm('你确定保存此操作内容吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                  type: 'warning'
                }).then(() => {
                  $.ajax({
                    type:'post',
                    url:'/departments/store',
                    dataType:'json',
                     data:{
                      name:that.name_client,
                      employee:that.shiftId
                     }
                  }).then(function(res){
                   // console.log(res)
                     window.location.href='/departments/showpage';
                  })
                  this.$message({
                    type: 'success',
                    message: '保存成功!'
                  });
                }).catch(() => {
                  this.$message({
                    type: 'info',
                    message: '已取消保存'
                  });          
                });
         },
         //点击取消
         home(){
           window.location.href='/departments/showpage';
         },
         //所以员工
         employees(){
              let that=this
              var employees=[]
              var obj={
                 label:'',
                 pinyin:'',
                 key:'',
                 company_id:'',
                 client_id:'',
                 department_id:''
                  }
              $.ajax({
                  type:'get',
                  url:'/departments/employees',
                  dataType:'json',
                  success:function(res){       
                    var empioyarr=res.content
                        for(let e in  empioyarr){
                            employees.push({
                              label:empioyarr[e].admin_name,
                              key:empioyarr[e].id,
                            })
                      } 
                      that.data=employees
                  }
              })
          },
         //所以部门查询
            allClienn(){
              var that=this;
              var aa=[] 
              $.ajax({
                  type:'get',
                  url:'/departments/index',
                  dataType:'json',
                  success:function(res){
                   // console.log(res.content.data)

                    for(var i=0;i<(res.content.data).length;i++){
                     // console.log((res.content.data)[i].department)
                      aa.push((res.content.data)[i])
                    }
                  //  that.restaurants = that.loadAll(aa);
                    
                  }
              })
            },
            // querySearch(queryString, cb) {
            //       var restaurants = this.restaurants;
            //       var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
            //       // 调用 callback 返回建议列表的数
            //       cb(results);
            //     },
            //     createFilter(queryString) {
            //       return (restaurant) => {
            //         return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
            //       };
            //     },
            //     loadAll(aa) {
            //         var  show_x=[]
            //         var obj={
            //          value:'',
            //          address:''
            //       }
            //     for(let e in aa){
                   
            //       show_x.push({
            //          value:aa[e].department,
            //          address:aa[e].id
            //       })
            //     }
            //        return show_x  
            //     },
                handleSelect(e) {
                 this.name_client=e.currentTarget.value
                },

        },
        mounted() {

           this.allClienn();
           this.employees();
      
       
        },
   });   
 
 </script>

@endsection